<!--
 * @description 个人信息组件
 * @date 2022/11/12
 -->
<template>
  <div :style="{ 'margin-top': top }" class="personal-comp">
    <div class="bgi" />
    <div
      :style="{ marginRight: spacing, marginLeft: spacing }"
      class="info-one"
    >
      <div class="top">
        <div class="header" />

        <div class="loginAuth">
          <div class="userMain">
            <div class="userMainInfo">
              <div class="userName">{{ userInfo.userRealname }}</div>
              <div class="ctags">
                <span
                  v-if="userInfo.isSingle && userInfo.isSingle === 'SFDS01'"
                  class="centerTag"
                >
                  <div class="tagMain ds">单身</div>
                </span>
                <span v-if="showAuthConfig === '1'" class="centerTag">
                  <div class="tagMain yrz">已认证</div>
                </span>
              </div>
            </div>
            <div v-if="showDept === '0'" class="desc">
              {{ userInfo.deptName }}
            </div>
          </div>
        </div>
        <div v-if="isAuth !== 'RZZT00'" class="rightIcon">
          <img src="./images/rightIcon.png" alt>
        </div>
      </div>
      <div v-if="myIntegral === 1" class="bottom">
        <div class="bottom-left">
          <img src="./images/jf.png" alt="">
          <section class="my-data">
            <span class="data-top">我的积分</span>
            <span class="data-bottom">{{ scoreTotal }}</span>
          </section>
        </div>
        <div class="bottom-right">
          <button>积分明细</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from './../mixins'
import mixin from './mixins'
export default {
  name: 'PersonalComp',
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userInfo: {},
      isAuth: 'RZZT00',
      scoreTotal: 0,
      // showAuthConfig: getConfigVal('USER_PROVE_IS_SHOW'),
      // showDept: getConfigVal('IS_SHOW_DEPT') // 是否展示部门
      showAuthConfig: '1',
      showDept: '0' // 是否展示部门
    }
  },
  computed: {
    myIntegral() {
      return this.option.myIntegral || 0
    }
  },

  created() {
    if (this.isInitData) {
      this.initData()
    }
  },
  methods: {
    setData(result) {
      if (result?.userInfo?.code === '200') {
        this.userInfo = result.userInfo?.data
        this.isAuth = result.userInfo?.data?.isAuth
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/var.scss";
@import "@/styles/utility/rem.scss";
.personal-comp{
  position: relative;
  min-height: rem(230);
  padding-top: rem(50);
  .bgi {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: rem(230);
    @include bg-image('./', '/bgi.png');

  }
  .info-one {
    border-radius: rem(16);
    background: #fff;
    padding: rem(45) rem(30) rem(25) rem(30);
    position: relative;
    .top {
      display: flex;
      height: rem(120);
      align-items: center;
      position: relative;

      .header {
        width: rem(120);
        height: 100%;
        // .show {
        //   height: rem(120);
        //   width: rem(120);
        //   border: 0 none;
        // }
        // .picture {
        //   height: rem(120);
        //   width: rem(120);
        // }
      }

      .noLogin {
        height: 100%;
        flex: 1;
        margin-left: rem(20);
        display: flex;

        .msg {
          height: 100%;
          flex: 1;

          .hi {
            color: #222222;
            font-size: rem(36);
            font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
            font-weight: 600;
          }
          .tishi {
            margin-top: rem(15);
            color: #999999;
            font-size: rem(26);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
          }
        }
        .subBtn {
          height: 100%;
          width: rem(190);
          .btn {
            height: rem(72);
            border-radius: rem(36);
            @include bg-color($mainColor);
            color: #fff;
            line-height: rem(72);
            text-align: center;
            font-size: rem(28);
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            font-weight: 500;
          }
        }
      }
      .loginNoAuth {
        height: 100%;
        flex: 1;
        margin-left: rem(20);

        .ke {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .hi {
            color: #222222;
            font-size: rem(36);
            font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
            font-weight: 600;
            display: flex;
            align-items: center;
            .wrz {
              margin-left: rem(20);
              width: rem(108);
              color: #fff;
              text-align: center;
              font-size: rem(20);
              height: rem(38);
              border-radius: rem(19);
              line-height: rem(38);
              background: linear-gradient(-90deg, #b2b2b2 0%, #d2d2d2 100%);
              img {
                width: rem(11);
                height: rem(14);
                vertical-align: middle;
              }
            }
          }
          .desc {
            width: 60%;
            margin-top: rem(15);
            font-size: rem(26);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            color: #999999;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }
        }
      }
      .loginAuth {
        height: 100%;
        flex: 1;
        margin-left: rem(22);
        .userMain {
          padding: rem(10) rem(0) rem(0) rem(0);
          height: 100%;
          .userMainInfo {
            height: rem(50);
            display: flex;
            .userName {
              padding-top: rem(3);
              max-width: rem(150);
              height: rem(42);
              margin-right: rem(19);
              line-height: rem(42);
              font-size: rem(36);
              font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
              font-weight: 600;
              color: #333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              line-height: rem(42);
            }
            .ctags {
              flex: 1;
              display: flex;
              align-items: center;
              .centerTag {
                margin: 0;
                display: inline-block;
                margin-left: rem(10);
                height: rem(40);
                border-radius: rem(19);
                .tagMain {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  text-align: center;
                  color: #fff;
                  height: rem(38);
                  padding: 0 rem(12);
                  border-radius: rem(19);
                  font-size: rem(20);
                  font-family: PingFang SC Medium, PingFang SC Medium-Medium;
                  font-weight: 500;

                  &.yrz {
                    background: #1fd281;
                  }
                  &.ds {
                    background: linear-gradient(-90deg, #fe5f00 0%, #ff9500 100%);
                  }
                  // &.zg {
                  //   background: linear-gradient(
                  //     -90deg,
                  //     #2e8efa 0%,
                  //     #58c2ff 100%
                  //   );
                  // }
                }
              }
            }
          }
          .desc {
            width: 60%;
            margin-top: rem(10);
            font-size: rem(26);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            color: #999999;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }
        }
      }

      .rightIcon {
        position: absolute;
        width: rem(13);
        height: rem(22);
        right: rem(23);
        top: 50%;
        transform: translateY(-50%);

        img {
          width: rem(13);
          height: rem(22);
        }
      }
    }

    .bottom {
      width: 100%;
      display: flex;
      height: rem(102);
      background: url("./images/jfbj.png") no-repeat;
      background-size: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: rem(37);
      .bottom-left {
        display: flex;
        align-items: center;
        margin-left: rem(10);
        img {
          height: rem(82);
          width: rem(92);
        }
        .my-data {
          display: flex;
          align-items: center;
          .data-top {
            font-size: rem(26);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            color: #733c15;
          }
          .data-bottom {
            font-size: rem(32);
            font-family: DIN Bold, DIN Bold-Bold;
            font-weight: 700;
            color: #733c15;
            margin-left: rem(29);
          }
        }
      }

      .bottom-right {
        margin-right: rem(22);
        button {
          border: none;
          height: rem(56);
          width: rem(150);
          border-radius: rem(28);
          background: #f17f29;
          font-size: rem(24);
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: bold;
          text-align: center;
          color: #ffffff;
        }
      }
    }
  }
}

</style>
